<template>
	<view>
		<view class="list">
			<view class="item flex align-center">
				<text>收货人</text>
				<input placeholder="请输入姓名" v-model="name"/>
			</view>
			<view class="item flex align-center">
				<text>手机号码</text>
				<input placeholder="请输入手机号" v-model="mobile"/>
			</view>
			<!-- #ifdef MP-ALIPAY -->
			<view class="item flex align-center justify-between" @click="changeregion">
				<text>省市区</text>
				<text class="txt1" style="width:60%;">{{regionName?regionName:'请选择地区'}}</text>
				<text style="margin-left: 20upx;" class="lg text-gray cuIcon-right"></text>
			</view>
			<u-picker mode="region" v-model="addressshow" :area-code='["31", "3101", "310113"]' @confirm="confirmregion"></u-picker>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<picker mode="region" @change="RegionChange" :value="region">
				<view class="item flex align-center justify-between">
					<text>省市区</text>
					<view class="flex align-center">
						<text>{{region[0]}}，{{region[1]}}，{{region[2]}}</text>
						<text style="margin-left: 20upx;" class="lg text-gray cuIcon-right"></text>
					</view>
				</view>
			</picker>
			<!-- #endif -->
			<view class="item flex align-center">
				<text>详细地址</text>
				<input placeholder="请输入详细地址" v-model="address"/>
			</view>
		</view>
		<view class="item item1 flex align-center justify-between">
			<text>默认地址</text>
			<text>下单时默认使用该地址</text>
			<switch class="section-right" :checked="isSwitch" @change="switchChange" />
		</view>
		<view class="btn-con flex align-center justify-center">
			<view class="btn" @tap="addAddressEdit">保存</view>
		</view>
	</view>
</template>

<script>

	var api = require('@/components/api.js');
	export default {

		data() {  
			return {
				user:'',
				defaultRegionCode:'201900',
				region: ['上海市', '上海市', '宝山区'],
				name:'',
				mobile:'',
				area:'上海市,上海市,宝山区',
				address:'',
				isSwitch:false,
				isDefault:1,
				backurl:'',
				addressshow:false,
				regionName:"",
				addressNum:0
			}
		},
		onShow() {
			this.loadUser()
			this.loadaddress()
		},
		onLoad(options){
		  this.backurl = options.backurl
		  this.loadUser()
		},
		methods: {
			loadaddress(){
				api.get({
					url: 'User/GetAddress?user_id='+this.user.user_id,
					success: data => {
						console.log(JSON.stringify(data));
						if (data.ErrCode == 0) {
							this.addressNum = data.Response.length
						}
					}
				});
			},
			confirmregion(e){
				console.log('e',e)
				this.regionName = e.province.label+','+e.city.label+','+e.area.label
				this.area = e.province.label+','+e.city.label+','+e.area.label
				
			},
			changeregion(){
				console.log('打开地区选择');
				this.addressshow=true
			},
			// 获取选择的地区
			handleGetRegion(region){
			    this.region = region
			},
			RegionChange(e) {
				this.region = e.detail.value
				this.area =  this.region[0]+','+this.region[1]+','+this.region[2]
				console.log('addAddress:'+e.detail.value)
				console.log('addAddress:'+this.area)
			},
			loadUser:function(){
				try {
				    this.user  = uni.getStorageSync('user');
					 console.log( this.user);
				} catch (e) {
				}
			},
			/**
			 * 添加地址
			 * **/
			addAddressEdit:function(){
				let that = this
				console.log('that.addressNum',that.addressNum)
				//return;
				
				uni.showLoading({
					title:'提交...'
				})
				if(that.addressNum<1){
					that.isDefault=2
				}
				api.post({
					url: 'User/PostAddressEdit?address_id=0&is_default='+that.isDefault+'&user_id='+that.user.user_id,
					data: {
						name:that.name,
						mobile:that.mobile,
						area:that.area,
						address:that.address,
						
					},
					success: data => {
						uni.hideLoading()
						console.log(JSON.stringify(data));
						if (data.ErrCode == 0) {
							uni.showToast({
								title:'成功'
							})
							console.log(that.backurl)
							if(that.backurl!=''){
								uni.navigateBack()
							}else{
								uni.navigateTo({
									url:'/pages/receivingAddress/receivingAddress'
								})
							}
							
						}
					}
				});
			},
			switchChange:function(e) {
				let value = e.target.value
				if(value){
					this.isDefault = 2
				}else{
					this.isDefault = 1
				}
				console.log(this.isDefault )
				console.log(value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.txt1{
		float:left;
		font-size: 34rpx;
	}
	.item1{
		padding: 0 20upx;
		margin-top: 20upx;
	}
	.item>text:nth-child(1){
			font-size: 28upx;
			color: #666666;
			width: 120upx;
	}
	.item>input{
		margin-left: 40upx;
	}
	.item{
		background-color: #fff;
		width: 100%;
		border-bottom: 1upx solid #ddd;
		height: 86upx;
	}
	.list{
		background-color: #fff;
		padding: 0 20upx;
	}
	.btn-con{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100upx;
		background-color: #fff;
		border-top: 1upx solid #ddd;
	}
		.btn{
			text-align: center;
			width: 560upx;
			line-height: 70upx;
				height: 70upx;
				background-color: $btn-bground;
				border-radius: 35upx;
				color: #fff;
				font-size: 28upx;
		}
</style>
